<template>
  <div
    class="message"
    :class="{ 'message-user': isUser, 'message-bot': !isUser }"
  >
    <VueShowdown :markdown="text" flavor="github" :options="{}" />
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    isUser: Boolean,
  },
};
</script>

<style scoped>
.message {
  padding: 12px 12px;
  border-radius: 12px;
  max-width: 80%; /* 限制对话气泡的宽度 */
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word; /* 防止长单词溢出 */
  margin-bottom: 10px;
  position: relative;
  transition: transform 0.3s ease-in-out; /* 动态效果 */
}

.message-user {
  margin-right: 5px;
  align-self: flex-end;
  background-color: #1282fb;
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.message-bot {
  align-self: flex-start;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* 强制调整 .message-bot 内部链接的样式 */
.message-bot a {
  color: #007bff !important; /* 设置链接文本颜色 */
  text-decoration: underline !important; /* 设置链接文本下划线 */
}

.message-bot a:hover {
  color: #0056b3 !important; /* 设置链接悬停时的文本颜色 */
  text-decoration: none !important; /* 设置链接悬停时的文本下划线 */
}

/* 当消息气泡被发送时添加微小的浮动效果 */
.message-user:hover,
.message-bot:hover {
  transform: translateY(-2px);
}

/* 让机器人和用户的消息气泡更有层次感 */
.message-user:before,
.message-bot:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.message-user:before {
  right: -8px;
  border-left: 3px solid #007bff;
}

.message-bot:before {
  left: -8px;
  border-right: 3px solid #f1f1f1;
}
</style>
